<template>
  <view>
    <view class="head" style="background-image: url('/static/images/ys/login/loginbk.png');">
      欢迎来到车联网服务平台商家端
    </view>
    <!-- <uni-card style="border-radius: 50px 50px 0 0;" class="mycard"></uni-card> -->
    <view class="main">
      <view class="main1">
        <view class="ima">
          <image src="/static/images/ys/login/loginimg.png" style="height: 250rpx; width: 360rpx;"></image>
          <view class="login">
            <u--input customStyle="width: 60%;" placeholder="手机号登录" border="bottom" clearable
                      v-model="loginForm.phone"></u--input>
            <u--input customStyle="width: 60%; margin-top: 3vh;" placeholder="输入验证码" border="bottom"
                      v-model="loginForm.code"
                      clearable></u--input>
            <u-button :customStyle='send' color="#4C8EFE" shape="circle" type="primary"
                      text="发送验证码" @click="send_code"></u-button>
            <view>
              <u--input customStyle="width: 60%; margin-top: 1vh;" placeholder="输入人机验证码" border="bottom"
                        v-model="loginForm.rjcode"
                        clearable></u--input>
              <img :src="codeUrl" @click="getCode" style="width: 200rpx; height: 60rpx;margin-left: 350rpx; "/>
            </view>
            <view class="register" @click="register_btn" style="font-size: 30rpx;width: 200rpx;">立即注册></view>
            <u-button :customStyle='login' type="primary" shape="circle" color="#1168EA"
                      @click="login_btn">登录
            </u-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					phone: '',
					code: '',
					rjcode: '',
					uuid: ''
				},
				codeUrl: '',
				
				
				
				// 登录按钮样式
				login: {
					width: '70vw',
					marginLeft: '0%',
					marginTop: '0%'
				},
				send: {
					width: '30vw',
					position: 'relative',
					top: '-7vh',
					left: '5vw'
				}
			}
		},
		onLoad() {
			this.getCode();
		},
		methods: {
			send_code(){
				// 直接从原型链中获取封装好的request对象即可
				let that = this;
				this.$http({
					url:'/api/shop/login/send/'+that.loginForm.phone,
					method:'POST',
					success(res){
						//console.log(res);
					}
				})
			},
			
			// 获取人机验证码函数
			getCode(){
				// 直接从原型链中获取封装好的request对象即可
				let that = this;
				this.$http({
					url:'/api/code',
					method:'GET',
					success(res){
						//console.log(res);
						that.codeUrl = "data:image/gif;base64," + res.data.img;
						// console.log(that.codeUrl)
						// console.log(res.data.uuid)
						that.loginForm.uuid = res.data.uuid;
					}
				})
			},
			
			
			register_btn() {
				uni.$u.route('/pages/ys/register/register')
			},
			login_btn() {
				//	登录验证
				let that = this;
				this.$http({
					url:'/api/shop/login/validate',
					method:'POST',
					data:that.loginForm,
					success(res){
						//console.log(res);
						// 如果登录成功，则需要把token保存到本地
						if(res.data.code==200){

							uni.setStorageSync("shop_id",res.data.data.id)

							//	调用若依的登录接口
							// 接受数据，发送请求即可
							let form={
								code: that.loginForm.rjcode,
								password: res.data.data.perPasword,
								username: res.data.data.name,
								uuid:	that.loginForm.uuid
							}
							that.$http({
								url:'/api/auth/login',
								method:'POST',
								data:form,
								success(res){
									//console.log(res)
									// 如果登录成功，则需要把token保存到本地
									if(res.data.code==200){
										// 缓存数据
										uni.setStorageSync("token",res.data.data.access_token);
										// console.log(res.data.data.access_token)
										//跳转页面
										alert("登录成功")
										uni.$u.route('/pages/lzx/business/homePage')
										
									}else{
										alert('登录失败！')
									}
								}
									
							})
							
							
							// 缓存数据
							// uni.setStorageSync("token",res.data.code);
							// console.log(res.data.data.access_token)
							//跳转页面
							// alert("登录成功")
							// uni.$u.route('/pages/lzx/business/homePage')
							
						}else{
							// alert('登录失败！')
						}
						
					}
				})
				
			}
		}
	}
</script>

<style>
	.main {
		position: relative;
	}

	.login {
		position: relative;
		/* margin-bottom: 40vh; */
		/* margin-left: 10vw; */
		left: 8vw;
		top: -5vh;
	}

	.register {
		font-size: 30%;
		color: #5593FE;
		position: relative;
		top: -5vh;
		left: 1vw;
	}

	.login {
		margin-left: -6vh;
		margin-top: 7vh;
	}

	.ima {
		position: relative;
		top: -10vh;
		left: 20vw;
	}

	.main {
		position: relative;
		top: -5vh;
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		height: 75vh;
	}

	.head {
		padding-top: 8vh;
		box-sizing: border-box;
		height: 30vh;
		background-size: contain;
		color: white;
		font-size: 30rpx;
		text-align: center;
		font-weight: 400;
	}

</style>=
